.main-title{color:#2d2d2d;text-align:center;text-transform:capitalize;padding:.7em 0}.content{position:relative;margin:auto;overflow:hidden}.content .content-overlay{background:rgba(21,34,85,0.7);position:absolute;height:100%;width:100%;left:0;top:0;bottom:0;right:0;opacity:0;-webkit-transition:all .4s ease-in-out 0;-moz-transition:all .4s ease-in-out 0;transition:all .4s ease-in-out 0}.content:hover .content-overlay{opacity:1}.content-image{width:100%;height:230px;object-fit:cover}.content-details{position:absolute;text-align:center;padding-left:1em;padding-right:1em;width:100%;top:50%;left:50%;opacity:0;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all .3s ease-in-out 0;-moz-transition:all .3s ease-in-out 0;transition:all .3s ease-in-out 0}.content:hover .content-details{top:50%;left:50%;opacity:1}.content-details h2{color:#fff;margin-bottom:.5em}.content-details p{color:#fff}.fadeIn-bottom{top:80%}.fadeIn-top{top:20%}.fadeIn-left{left:20%}.fadeIn-right{left:80%}.codrops-top{width:100%;text-transform:uppercase;font-size:.69em;line-height:2.2}.codrops-top a{display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px}.codrops-top span.right{float:right}.codrops-top span.right a{display:block;float:left}.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:400;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased}.codrops-icon-drop:before{content:"\e001"}.codrops-icon-prev:before{content:"\e004"}.related{padding:6em 1em;font-size:120%}.related > a{border:1px solid #4f7f90;display:inline-block;text-align:center;margin:20px 10px;padding:25px}.related a:hover{border-color:#39545e}.related a img{max-width:100%;opacity:.8}.related a:hover img,.related a:active img{opacity:1}.related a h3{margin:0;padding:.5em 0 .3em;max-width:300px;text-align:left}@media screen and (max-width: 25em){.codrops-header{font-size:75%}.codrops-icon span{display:none}}@media screen and (max-width:992px){.figure.effect-sadie p{padding:.5em!important}}.h-hover.grid figure{height:220px!important}.grid figure{position:relative;z-index:1;display:inline-block;overflow:hidden;width:100%;background:#3085a3;text-align:center;cursor:pointer}.grid figure img{position:relative;display:block;min-height:220px;opacity:.9;width:100%;object-fit:cover}.grid figure figcaption{padding:2em;color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden}.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}.grid figure figcaption,.grid figure a{position:absolute;top:0;left:0;width:100%;height:100%}.grid figure a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}.grid figure h2,.grid figure p{margin:0}figure.effect-ruby{background-color:#0e3741}figure.effect-ruby img{-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s;-webkit-transform:scale(1.15);transform:scale(1.15)}figure.effect-ruby:hover img{-webkit-transform:scale(1);transform:scale(1)}figure.effect-ruby h2{margin-top:55%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}figure.effect-ruby p{margin:1em 0 0;padding:1em;border:1px solid #fff;opacity:0;-webkit-transition:opacity 0.35s,-webkit-transform .35s;transition:opacity 0.35s,transform .35s;-webkit-transform:translate3d(0,20px,0) scale(1.1);transform:translate3d(0,20px,0) scale(1.1)}figure.effect-ruby:hover h2{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}figure.effect-ruby:hover p{opacity:1;-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1)}@media screen and (max-width: 41.5em){.grid figure{width:100%}}@media (min-width:992px) and (max-width:1025px){figure.effect-sadie h2{bottom:30px!important}}